<template>
  <div v-loading="loading" class="login_wrap">
    <div class="login_box">
      <h2>猫腻剧本杀后台管理</h2>
      <!-- 表单 -->
      <el-form :model="form" label-width="120px">
        <el-form-item label="账号">
          <el-input v-model="loginData.account" placeholder="account" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginData.pwd" type="password" placeholder="password" show-password />
        </el-form-item>
        <el-form-item>
          <el-button id="TencentCaptcha" data-appid="2041935184" data-cbfn="callbackName"
            data-biz-state="data-biz-state" type="primary">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import api from "../utils/api";
import { ElMessage, ElLoading } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
window.callbackName = function (res) {
  // 返回结果
  // ret         Int       验证结果，0：验证成功。2：用户主动关闭验证码。
  // ticket      String    验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
  // CaptchaAppId       String    验证码应用ID。
  // bizState    Any       自定义透传参数。
  // randstr     String    本次验证的随机串
  console.log("callback:", res);
  // res（用户主动关闭验证码）= {ret: 2, ticket: null}
  // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}

  if (res.ret === 0) {
    var loading = ref(true);
    api.adminLSA(res.ticket, res.randstr).then(res => {
      if (res.data.code == 200) {
        api.adminLogin(loginData).then(res => {
          if (res.data.code == 200) {
            loading = ref(false);
            ElMessage.success(res.data.msg);
            router.push('/home');
          } else {
            ElMessage.error(res.data.msg)
          }
        })
      }
    })
  } else {
    ElMessage.error('请完成登陆安全验证')
  }
};
// 数据
const loginData = reactive({
  account: '',
  pwd: ''
})
// 方法
</script>
<style lang="less" scoped>
.login_wrap {
  height: 100%;
  width: 100%;
  background-image: url("../assets/Desktop\ 6\ \(2\).jpg");
  background-size: cover;
  font-size: 16px;
}
.login_wrap .login_box {
  box-sizing: border-box;
  padding-top: 150px;
  position: absolute;
  top: 220px;
  right: 15%;
  width: 30rem;
  height: 32rem;
  background: #fff;
  box-shadow: 0px 0px 15px 10px #eee;
  border-radius: 10px;
}
.login_wrap .login_box h2 {
  margin-bottom: 30px;
  text-align: center;
  font-family: "隶书";
  font-size: 35px;
}
.login_wrap .login_box .el-form-item {
  margin: 40px 0px;
}
.login_wrap .login_box .el-input {
  width: 70%;
  height: 35px;
}
.login_wrap .login_box .el-button {
  text-align: center;
  margin-left: 20px;
  width: 200px;
  height: 35px;
}
</style>